<template>
	<!--地区选择 五级-->
	<el-form-item label="所属区域" :required='true'>
		<el-select class="diqu" v-model="diqu.sheng" placeholder="省" @change="xuan($event,'省')" :disabled="ispid">
			<el-option v-for="(a,index) in quyu.sheng" :label="a.name" :key="index" :value="a.areaId">
			</el-option>
		</el-select>
		<el-select class="diqu" v-model="diqu.shi" placeholder="市" @change="xuan($event,'市')" clearable :disabled="ispid">
			<el-option v-for="(a,index) in quyu.shi" :label="a.name" :key="index" :value="a.areaId">
			</el-option>
		</el-select>
		<el-select class="diqu" v-model="diqu.qu" placeholder="区县" @change="xuan($event,'区')" clearable :disabled="ispid">
			<el-option v-for="(a,index) in quyu.qu" :label="a.name" :key="index" :value="a.areaId">
			</el-option>
		</el-select>
		<el-select class="diqu" v-model="diqu.xiang" placeholder="乡镇" @change="xuan($event,'乡')" clearable :disabled="ispid">
			<el-option v-for="(a,index) in quyu.xiang" :label="a.name" :key="index" :value="a.areaId">
			</el-option>
		</el-select>
		<el-select class="diqu" v-model="diqu.cun" placeholder="村" @change="xuan($event,'村')" clearable :disabled="ispid">
			<el-option v-for="(a,index) in quyu.cun" :label="a.name" :key="index" :value="a.areaId">
			</el-option>
		</el-select>
	</el-form-item>
</template>

<script>
	export default {
		name: 'diqu',
		props: {
			id: {
				type: String
			},
			name: {
				type: String
			},
			pid: {
				type: String
			}
		},
		data() {
			return {

				diqu: { //选择的地区信息
					sheng: '',
					shi: '',
          qu:'',
          xiang:'',
          cun:''
				},
				quyu: { //地区信息
					sheng: [],
					shi: [],
					qu: [],
					xiang: [],
					cun: []
				},
        		ispid:''
			}
		},
		mounted() {
			if(this.pid){
				this.ispid = true
			} else {
				this.ispid = false
			}
			if (this.id && this.name) {
				this.xiangshang(this.id, this.name)
			}
			this.getdiqu()
		},
		watch: {
      'id': function(n, o) {
        console.log(n)
      },
			id(val) {
				this.xiangshang(this.id, this.name)
				if (!this.id) {
					this.diqu = { //地区信息
					}
				}
			}
		},
		methods: {
			xiangshang(id, a) { //默认选中地区
				if (id) {
					this.$get("/area/getdetail/" + id).then(res => {
						
						if (a == "村") {
							this.diqu.cun = res.data.data.areaId;
							this.xiangshang(res.data.data.parentId, "乡")
						} else if (a == "乡") {
							this.diqu.xiang = res.data.data.areaId;
							this.xiangshang(res.data.data.parentId, "区")
							this.getxiaji(res.data.data.areaId, "村")
						} else if (a == "区") {
							this.diqu.qu = res.data.data.areaId;
							this.xiangshang(res.data.data.parentId, "市")
							this.getxiaji(res.data.data.areaId, "区")
						} else if (a == "市") {
							this.diqu.shi = res.data.data.areaId;
							this.xiangshang(res.data.data.parentId, "省")
							this.getxiaji(res.data.data.areaId, "市")
						} else if (a == "省") {
							this.diqu.sheng = res.data.data.areaId;
							this.getxiaji(res.data.data.areaId, "省")
						}
					})
				}
			},
			qingkong(a) {
				if (a > 3) {
					this.diqu.shi = ''
					this.quyu.shi = []
				}
				if (a > 2) {
					this.diqu.qu = ''
					this.quyu.qu = [];
				}
				if (a > 1) {
					this.diqu.xiang = ''
					this.quyu.xiang = [];
				}
				if (a > 0) {
					this.diqu.cun = ''
					this.quyu.cun = [];
				}
			},
			xuan(val, a) { //选中地区
				if (a == "省") {
					if (!val) {
						this.diqu.sheng = ''
						a = ''
					}
					this.qingkong(4)
				} else if (a == "市") {
					if (!val) {
						this.diqu.shi = ''
						a="省"
					}
					this.qingkong(3)
				} else if (a == "区") {
					if (!val){
						this.diqu.qu = ''
						a="市"
					}

					this.qingkong(2)
				} else if (a == "乡") {
					if (!val){
						a="区"
						this.diqu.xiang = ''
					}

					this.qingkong(1)
				} else if (a == "村") {
					if (!val){
						a="乡"
						this.diqu.cun = ''
					}

				}

				this.getxiaji(val, a)
				var code = '';
				if (this.diqu.sheng)
					code = this.diqu.sheng
				if (this.diqu.shi)
					code = this.diqu.shi
				if (this.diqu.qu)
					code = this.diqu.qu
				if (this.diqu.xiang)
					code = this.diqu.xiang
				if (this.diqu.cun)
					code = this.diqu.cun
				for (var i in this.quyu) {
					var diqu = this.quyu[i]
					for (var b in diqu) {
						if (diqu[b].areaId == code) {
							diqu[b].jibie = a;
							this.$emit("test", diqu[b])
						}
					}
				}


			},
			getxiaji(id, a) { //选中地区后得到地区下级信息
				if (!id) {
					return false
				}
				this.$get("/area/" + id + "/child").then(res => {
					if (a === "省") {
						this.quyu.shi = res.data.data;
					} else if (a === "市") {
						this.quyu.qu = res.data.data;
					} else if (a === "区") {
						this.quyu.xiang = res.data.data;
					} else if (a === "乡" || a ==="村") {
						this.quyu.cun = res.data.data;
					}
				})
			},
			getdiqu() { //得到地区最高级信息
				this.$get("/area/list", {
					current: 1,
					size: 100
				}).then(res => {
					this.quyu.sheng = res.data.data.records;
				})
			},
		}
	};
</script>

<style scoped>
	.el-select.diqu {
		width: 18%;
		float: left;
		margin-right: 2%;
	}
</style>
